<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子表</title>
</head>
<body>
<div class="timepiece">
    <span>00</span>
    <span>:</span>
    <span>00</span>
    <span>:</span>
    <span>00</span>
</div>

<script>
    var time;
    function update() {
        time = new Date();
        if(time.getSeconds()<10){
            document.getElementsByClassName("timepiece")[0].getElementsByTagName("span")[4].innerHTML ="0" + time.getSeconds();
        }else {
            document.getElementsByClassName("timepiece")[0].getElementsByTagName("span")[4].innerHTML =time.getSeconds();
        }
        document.getElementsByClassName("timepiece")[0].getElementsByTagName("span")[0].innerHTML = time.getHours();
        document.getElementsByClassName("timepiece")[0].getElementsByTagName("span")[2].innerHTML = time.getMinutes();

    }
    setInterval(update,1000);
</script>
</body>
</html>